<template>
  <el-dialog
    v-dialogDrag
    top="5vh"
    :before-close="dialogClose"
    :title="dialogTitle"
    :visible="isShow"
    destroy-on-close
  >
    <!--//!  form -->
    <div class="dialog-form">
      <el-form
        ref="subform"
        label-position="right"
        label-width="100px"
        :model="formTemper"
        :rules="rules"
      >
        <el-form-item label="数据源" prop="datasource">
          <el-select
            v-model="formTemper.datasource"
            placeholder="请选择数据源"
            @change="dataSourceChange"
          >
            <el-option
              v-for="(item, index) in datasource"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据源名称" prop="datasourceName">
          <el-input v-model="formTemper.datasourceName" />
        </el-form-item>
        <el-form-item label="数据源分组">
          <el-input v-model="formTemper.datasourceGroup" />
        </el-form-item>
        <el-form-item label="用户名" prop="jdbcUsername">
          <el-input v-model="formTemper.jdbcUsername" />
        </el-form-item>
        <el-form-item label="密码" prop="jdbcPassword">
          <el-input v-model="formTemper.jdbcPassword" />
        </el-form-item>
        <el-form-item label="jdbc url" prop="jdbcUrl">
          <el-input v-model="formTemper.jdbcUrl" type="textarea" />
        </el-form-item>
        <el-form-item label="jdbc驱动类" prop="jdbcDriverClass">
          <el-input v-model="formTemper.jdbcDriverClass" />
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-radio-group v-model="formTemper.status">
            <el-radio
              v-for="(item, index) in datasourceStatus"
              :key="index"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="注释">
          <el-input v-model="formTemper.comments" type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <!--//!  form -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button
        :disabled="state.connectLoading"
        :loading="state.connectLoading"
        type="primary"
        @click="connectTest"
      >
        {{ state.connectLoading ? '正在测试' : '测试链接' }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import {
  Message
} from 'element-ui';
import { state, testConnect } from '@/views/admin/dataSource/dataSourceState';

const formTemper = {
  status: '1', // 状态（1是启用，0是禁用，-1是删除）
  datasource: '', // 数据源
  datasourceName: '', // 数据源名称
  datasourceGroup: 'Default', // 数据源分组
  jdbcUsername: '', // 用户名
  jdbcPassword: '', // 密码
  jdbcUrl: '',
  jdbcDriverClass: '',
  comments: '' // 备注
};

const datasource = [
  {
    label: 'mysql',
    value: 'mysql',
    jdbcUrl: 'jdbc:mysql://{host}:{port}/{database}',
    jdbcDriverClass: 'com.mysql.jdbc.Driver'
  },
  {
    label: 'oracle',
    value: 'oracle',
    jdbcUrl: 'jdbc:oracle:thin:@//{host}:{port}/{database}',
    jdbcDriverClass: 'oracle.jdbc.OracleDriver'
  }
];
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    rowNow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      state,
      datasourceStatus: [
        {
          label: '删除',
          value: -1
        },
        {
          label: '禁用',
          value: 0
        },
        {
          label: '启用',
          value: 1
        }
      ],
      formTemper: { ...formTemper },
      datasource, // 数据源
      rules: {
        datasource: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        datasourceName: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        jdbcUsername: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        jdbcPassword: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        jdbcUrl: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        jdbcDriverClass: [
          { required: true, message: ' ', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    // 编辑还是添加数据源
    isEditRow() {
      return Object.keys(this.rowNow).length > 0;
    },

    // 标题
    dialogTitle() {
      let str;
      if (this.isEditRow) {
        str = '编辑数据源';
      } else {
        str = '添加数据源';
      }
      return str;
    }
  },
  watch: {
    isShow: {
      handler: function() {
        this.initDialog();
      },
      immediate: true
    }
  },
  methods: {
    connectTest() {
      testConnect(this.formTemper);
    },

    dataSourceChange(key) {
      const selNow = this.datasource.find(item => item.value === key);
      this.formTemper.jdbcUrl = selNow.jdbcUrl;
      this.formTemper.jdbcDriverClass = selNow.jdbcDriverClass;
    },

    submitForm() {
      this.$refs.subform.validate((valid) => {
        if (valid) {
          this.$emit('addSource', {
            row: this.formTemper,
            type: this.isEditRow ? 'edit' : 'add'
          });
        } else {
          Message.error('请正确填写数据');
          return false;
        }
      });
    },

    dialogClose() {
      this.$emit('closeDialog');
    },

    initDialog() {
      if (this.isEditRow) {
        Object.keys(this.rowNow)
          .map(key => {
            this.formTemper[key] = this.rowNow[key];
          });
      } else {
        this.formTemper = { ...formTemper };
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .dialog-form {
    display: grid;
    grid-template-columns: 1fr .4fr;
  }
  // /deep/ * {
  //  .el-form {
  //  }
  // }
</style>
